<template>
  <div id="car-List">
    <div class="list-center">
      <div class="list-center-top">
        <van-nav-bar
          title="选择车系"
          left-text="返回"
          right-text="品牌介绍"
          left-arrow
          @click-left="onClickLeft"
          @click-right="onClickRight"
        />
      </div>
      <div class="list-center-show">
        <div class="list-center-show-one">
          <div class="list-center-show-img">
            <img src="../assets/image/1.png" alt="" />
          </div>
          <div class="list-center-show-text">
            <span>秦PLUS DM-i</span>
            <button>立即下单</button>
          </div>
        </div>
        <div class="list-center-show-one">
          <div class="list-center-show-img">
            <img src="../assets/image/1.png" alt="" />
          </div>
          <div class="list-center-show-text">
            <span>汉EV</span>
            <button>获取低价</button>
          </div>
        </div>
        <div class="list-center-show-one">
          <div class="list-center-show-img">
            <img src="../assets/image/1.png" alt="" />
          </div>
          <div class="list-center-show-text">
            <span>宋PLUS DM-i</span>
            <button>获取低价</button>
          </div>
        </div>
      </div>
      <div class="list-center-classify">
        <div class="list-center-class-ont">
          <span>全部</span>
        </div>
        <div class="list-center-class-ont">
          <span>轿车</span>
        </div>
        <div class="list-center-class-ont">
          <span>SUV</span>
        </div>
        <div class="list-center-class-ont">
          <span>MPV</span>
        </div>
        <div class="list-center-class-ont">
          <span>跑车</span>
        </div>
        <div class="list-center-class-ont">
          <span>新能源</span>
        </div>
        <div class="list-center-class-ont">
          <span>在售</span>
        </div>
      </div>
      <van-divider>轿车</van-divider>
      <div class="list-center-body">
        <div class="list-center-body-for">
          <div class="list-center-body-for-img">
            <img src="../assets/image/1.png" alt="" />
          </div>
          <div class="list-center-body-for-det">
            <div class="detail">
              <h2>比亚迪e2</h2>
              <span>懂车分</span>
              <van-rate
                v-model="value"
                color="#81D8D0"
                icon="like"
                size="14"
                void-icon="like-o"
              />
              <span>3.43</span>
              <p>补贴价格：9.58-15.08万</p>
            </div>
          </div>
        </div>
        <div class="list-center-body-for">
          <div class="list-center-body-for-img">
            <img src="../assets/image/1.png" alt="" />
          </div>
          <div class="list-center-body-for-det">
            <div class="detail">
              <h2>比亚迪e2</h2>
              <span>懂车分</span>
              <van-rate
                v-model="value"
                color="#81D8D0"
                icon="like"
                size="14"
                void-icon="like-o"
              />
              <span>3.43</span>
              <p>补贴价格：9.58-15.08万</p>
            </div>
          </div>
        </div>
        <div class="list-center-body-for">
          <div class="list-center-body-for-img">
            <img src="../assets/image/1.png" alt="" />
          </div>
          <div class="list-center-body-for-det">
            <div class="detail">
              <h2>比亚迪e2</h2>
              <span>懂车分</span>
              <van-rate
                v-model="value"
                color="#81D8D0"
                icon="like"
                size="14"
                void-icon="like-o"
              />
              <span>3.43</span>
              <p>补贴价格：9.58-15.08万</p>
            </div>
          </div>
        </div>
        <div class="list-center-body-for">
          <div class="list-center-body-for-img">
            <img src="../assets/image/1.png" alt="" />
          </div>
          <div class="list-center-body-for-det">
            <div class="detail">
              <h2>比亚迪e2</h2>
              <span>懂车分</span>
              <van-rate
                v-model="value"
                color="#81D8D0"
                icon="like"
                size="14"
                void-icon="like-o"
              />
              <span>3.43</span>
              <p>补贴价格：9.58-15.08万</p>
            </div>
          </div>
        </div>
        <van-divider>SUV</van-divider>
        <div class="list-center-body-for">
          <div class="list-center-body-for-img">
            <img src="../assets/image/1.png" alt="" />
          </div>
          <div class="list-center-body-for-det">
            <div class="detail">
              <h2>比亚迪e2</h2>
              <span>懂车分</span>
              <van-rate
                v-model="value"
                color="#81D8D0"
                icon="like"
                size="14"
                void-icon="like-o"
              />
              <span>3.43</span>
              <p>补贴价格：9.58-15.08万</p>
            </div>
          </div>
        </div>
        <div class="list-center-body-for">
          <div class="list-center-body-for-img">
            <img src="../assets/image/1.png" alt="" />
          </div>
          <div class="list-center-body-for-det">
            <div class="detail">
              <h2>比亚迪e2</h2>
              <span>懂车分</span>
              <van-rate
                v-model="value"
                color="#81D8D0"
                icon="like"
                size="14"
                void-icon="like-o"
              />
              <span>3.43</span>
              <p>补贴价格：9.58-15.08万</p>
            </div>
          </div>
        </div>
        <div class="list-center-body-for">
          <div class="list-center-body-for-img">
            <img src="../assets/image/1.png" alt="" />
          </div>
          <div class="list-center-body-for-det">
            <div class="detail">
              <h2>比亚迪e2</h2>
              <span>懂车分</span>
              <van-rate
                v-model="value"
                color="#81D8D0"
                icon="like"
                size="14"
                void-icon="like-o"
              />
              <span>3.43</span>
              <p>补贴价格：9.58-15.08万</p>
            </div>
          </div>
        </div>
        <div class="list-center-body-for">
          <div class="list-center-body-for-img">
            <img src="../assets/image/1.png" alt="" />
          </div>
          <div class="list-center-body-for-det">
            <div class="detail">
              <h2>比亚迪e2</h2>
              <span>懂车分</span>
              <van-rate
                v-model="value"
                color="#81D8D0"
                icon="like"
                size="14"
                void-icon="like-o"
              />
              <span>3.43</span>
              <p>补贴价格：9.58-15.08万</p>
            </div>
          </div>
        </div>
        <van-divider>商务</van-divider>
        <div class="list-center-body-for">
          <div class="list-center-body-for-img">
            <img src="../assets/image/1.png" alt="" />
          </div>
          <div class="list-center-body-for-det">
            <div class="detail">
              <h2>比亚迪e2</h2>
              <span>懂车分</span>
              <van-rate
                v-model="value"
                color="#81D8D0"
                icon="like"
                size="14"
                void-icon="like-o"
              />
              <span>3.43</span>
              <p>补贴价格：9.58-15.08万</p>
            </div>
          </div>
        </div>
        <div class="list-center-body-for">
          <div class="list-center-body-for-img">
            <img src="../assets/image/1.png" alt="" />
          </div>
          <div class="list-center-body-for-det">
            <div class="detail">
              <h2>比亚迪e2</h2>
              <span>懂车分</span>
              <van-rate
                v-model="value"
                color="#81D8D0"
                icon="like"
                size="14"
                void-icon="like-o"
              />
              <span>3.43</span>
              <p>补贴价格：9.58-15.08万</p>
            </div>
          </div>
        </div>
        <div class="list-center-body-for">
          <div class="list-center-body-for-img">
            <img src="../assets/image/1.png" alt="" />
          </div>
          <div class="list-center-body-for-det">
            <div class="detail">
              <h2>比亚迪e2</h2>
              <span>懂车分</span>
              <van-rate
                v-model="value"
                color="#81D8D0"
                icon="like"
                size="14"
                void-icon="like-o"
              />
              <span>3.43</span>
              <p>补贴价格：9.58-15.08万</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      value: 3,
    };
  },
  methods: {
    onClickLeft() {
      Toast("返回");
    },
    onClickRight() {
      Toast("按钮");
    },
  },
};
</script>

<style lang="scss" src="../assets/css/carlist.scss" scoped>
</style>